{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block beforehead %}

<script>

function initVM(data) {
    $('#div-blogs').show();
    var vm = new Vue({
        el: '#div-blogs',
        data: {
            blogs: data.blogs,
            page: data.page
        },
        methods: {
            previous: function () {
                gotoPage(this.page.page_index - 1);
            },
            next: function () {
                gotoPage(this.page.page_index + 1);
            },
            edit_blog: function (blog) {
                location.assign('/manage/blogs/edit/' + blog.id);
            },
            delete_blog: function (blog) {
                showConfirm('确认删除？', '确认要删除“' + blog.name + '”？删除后不可恢复！', function () {
                    postApi('/api/blogs/' + blog.id + '/delete', {}, function (err, r) {
                        if (err) {
                            return showError(err);
                        }
                        location.reload();
                    });
                });
            }
        }
    });
}

$(function() {
    getApi('/api/blogs?page={{ page_index }}', function (err, results) {
        if (err) {
            return showError(err);
        }
        $('#div-loading').hide();
        initVM(results);
    });
});

</script>

{% endblock %}

{% block content %}

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
                <li><a href="/manage/comments">评论</a></li>
                <li class="uk-active"><span>日志</span></li>
                <li><a href="/manage/users">用户</a></li>
            </ul>
        </div>
    </div>

    <div class="uk-width-1-1 uk-margin-bottom">
        <div class="uk-alert uk-alert-danger uk-hidden"></div>
    </div>

    <div id="div-blogs" class="uk-width-1-1" style="display:none">
        <a href="/manage/blogs/create" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> 新日志</a>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-5-10">标题 / 摘要</th>
                    <th class="uk-width-2-10">作者</th>
                    <th class="uk-width-2-10">创建时间</th>
                    <th class="uk-width-1-10">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="blog: blogs" >
                    <td>
                        <a target="_blank" v-attr="href: '/blog/'+blog.id" v-text="blog.name"></a>
                    </td>
                    <td>
                        <a target="_blank" v-attr="href: '/user/'+blog.user_id" v-text="blog.user_name"></a>
                    </td>
                    <td>
                        <span v-text="blog.created_at.toDateTime()"></span>
                    </td>
                    <td>
                        <a href="#0" v-on="click: edit_blog(blog)"><i class="uk-icon-edit"></i>
                        <a href="#0" v-on="click: delete_blog(blog)"><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="uk-width-1-1 uk-text-center">
            <ul class="uk-pagination">
                <li v-if="! page.has_previous" class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>
                <li v-if="page.has_previous"><a v-on="click: previous()" href="#0"><i class="uk-icon-angle-double-left"></i></a></li>
                <li class="uk-active"><span v-text="page.page_index"></span></li>
                <li v-if="! page.has_next" class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>
                <li v-if="page.has_next"><a v-on="click: next()" href="#0"><i class="uk-icon-angle-double-right"></i></a></li>
            </ul>
        </div>
    </div>

    <div id="div-loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>
{% endblock %}
